/* ================================ */
/* CSS for control sap.m/InputBase  */
/* Base theme                       */
/* ================================ */

.sapMInputBase {
	height: 3rem;
	background: transparent;
	position: relative;
	display: inline-block;
	vertical-align: top;
}

.sapMInputBaseWidthPadding {
	padding: 0.25rem 0;
}

.sapMInputBaseInner {
	color: @sapUiFieldTextColor;
	background: @sapUiFieldBackground;
	border: 1px solid @sapUiFieldBorderColor;
	-webkit-appearance: none;
	border-radius: 0;
	vertical-align: top;
	margin: 0;
	-moz-appearance: textfield;
	font-size: @sapMFontMediumSize;
	font-family: @sapUiFontFamily;
	line-height: normal;
	height: 2.5rem;
	padding: 0 0.75rem;
}

.sapMInputBase,
.sapMInputBaseInner,
.sapMInputBasePlaceholder {
	box-sizing: border-box;
}

.sapMInputBaseInner::-webkit-input-placeholder {
	font-size: @sapMFontMediumSize;
	font-style: italic;
}

.sapMInputBaseInner::-moz-placeholder {
	font-size: @sapMFontMediumSize;
	font-style: italic;
}

.sapMInputBaseInner:-ms-input-placeholder {
	font-size: @sapMFontMediumSize;
	font-style: italic;
}

.sapMInputBasePlaceholder {
	font-size: @sapMFontMediumSize;
	color: @sapUiFieldPlaceholderTextColor;
	cursor: text;
	position: absolute;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	font-style: italic;
	line-height: 2.5rem;
	padding: 0 0.75rem;
}

.sapMInputBaseState .sapMInputBaseInner.sapMInputBaseStateInner,
.sapMInputBaseStateInner {
	border-width: 2px;
	padding: 0 0.6875rem;
}

.sapMInputBaseDisabled > .sapMInputBaseReadonly,
.sapMInputBaseDisabled > .sapMInputBasePlaceholder {
	cursor: default;
}

.sapMInputBaseInner,
.sapMInputBasePlaceholder {
	width: 100%;	/* fit the parents(sapMInputBase) width */
}

.sapMInputBaseInner::-webkit-outer-spin-button,
.sapMInputBaseInner::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.sapMInputBaseInner:focus {
	outline: none;
	outline-width: 0;
}

/* remove user agent pseudo-element clear button (IE specifix) */
.sapMInputBaseInner::-ms-clear {

	/* note: don't use display: none; see BCP 1570024996 */
	height: 0;
}

.sapMPointer > .sapMInputBaseInner {
	cursor: pointer;
}

.sapMInputBaseDisabled {
	opacity: 0.5;
}

.sapMInputBaseInner[placeholder] {
	text-overflow: ellipsis;
}

.sapMInputBaseInner::-webkit-input-placeholder {
	color: @sapUiFieldPlaceholderTextColor;
	text-overflow: ellipsis !important; /* important is necessary to overwrite inline style of shadow dom */
}

.sapMInputBaseInner::-moz-placeholder {
	color: @sapUiFieldPlaceholderTextColor;
}

.sapMInputBaseInner:-ms-input-placeholder {
	color: @sapUiFieldPlaceholderTextColor;
}

.sapMInputBaseInner:invalid {

	/* disable native browser input validation visualization e.g. for type email or number */
	box-shadow: none;
}

.sapMInputBaseErrorInner {
	background: @sapUiFieldInvalidBackground;
	border-color: @sapUiFieldInvalidColor;
}

.sapMInputBaseReadonlyInner {
	border-color: @sapUiFieldReadOnlyBorderColor;
	background: @sapUiFieldReadOnlyBackground;
}

.sapMInputBaseInner:not(.sapMInputBaseReadonlyInner):not(.sapMInputBaseStateInner):focus {
	border-color: @sapUiFieldFocusBorderColor;
}

.sapMInputBaseInner:not(.sapMInputBaseReadonlyInner):not(.sapMInputBaseStateInner):not(.sapMInputBaseDisabledInner):hover {
	background: @sapUiFieldHoverBackground;
	border-color: @sapUiFieldHoverBorderColor;
}

.sapMILI-CTX .sapMInputBaseInner {
	text-align: right;
	background: transparent;
}

html[dir=rtl] .sapMILI-CTX .sapMInputBaseInner,
html[dir=rtl] .sapMILI-CTX .sapMInputBasePlaceholder {
	text-align: left;
}

.sapMILI-CTX .sapMInputBasePlaceholder {
	text-align: right;
}

.sapMLIBActive .sapMInputBaseInner {
	color: @sapUiListActiveTextColor;
	background: transparent;
}

.sapMLIBActive .sapMInputBaseInner::-webkit-input-placeholder {
	color: @sapUiListActiveTextColor;
}

/* Compact size */
.sapUiSizeCompact {

	.sapMInputBase {
		height: 2rem;
	}

	.sapMInputBaseInner {
		height: 1.625rem;
		padding: 0 0.5rem;
	}

	.sapMInputBasePlaceholder {
		line-height: 1.625rem;
		padding: 0 0.5rem;
	}
}

.sapUiSizeCompact .sapMInputBaseWidthPadding {
	padding: 0.1875rem 0;
}

/* Condensed size */
.sapUiSizeCondensed .sapUiTableCell {
	.sapMInputBase {
		height: 1.375rem; /* + 2*1px padding = 1.5rem */
		padding: 0 0.0625rem; /* 1px padding only */

		&.sapMInputValHelp {
			top: 0;
		}
	}

	.sapMInputBaseInner:not(.sapMInputBaseStateInner) {
		border-color: transparent;
	}

	.sapMInputBaseInner {
		height: 1.375rem;
	}

	.sapMInputBasePlaceholder,
	.sapMInputDescription > span {
		line-height: 1.375rem;
	}
}

/* Input selection fix -
 * Due to the fact that the CSS parsing rules require dropping the whole rule when encountering an invalid
 * pseudo-element, two separate rules must be written */
.sapMInputBaseInner {

	&::selection {
		background: @sapUiSelected;
		color: @sapUiContentContrastTextColor;
	}

	&::-moz-selection {
		background: @sapUiSelected;
		color: @sapUiContentContrastTextColor;
	}
}

/* Google chrome and Safari input selection fix:
 * The browser renders the selection background with 50% opacity by default.
 * The solution is to use fade with a value for alpha 99 if it's set 100 the browser ignores it.
 */
html[data-sap-ui-browser^="sf"],
html[data-sap-ui-browser^="cr"] {
	.sapMInputBaseInner::selection {
		background: fade(@sapUiSelected, 99);
	}
}

.sapMInputBaseWarningInner {
	background: @sapUiFieldWarningBackground;
	border-color: @sapUiFieldWarningColor;
}

.sapMInputBaseSuccessInner {
	background: @sapUiFieldSuccessBackground;
	border-color: @sapUiFieldSuccessColor;
}

// When disabled or read-only hide placeholder by setting opacity to 0
.sapMInputBaseDisabled {
	.sapMInputBaseInner::-webkit-input-placeholder {
		opacity: 0;
	}

	.sapMInputBaseInner::-moz-placeholder {
		opacity: 0;
	}

	.sapMInputBaseInner:-ms-input-placeholder {
		color: @sapUiFieldBackground;
	}
}

.sapMInputBaseReadonly {
	.sapMInputBaseInner::-webkit-input-placeholder {
		opacity: 0;
	}

	.sapMInputBaseInner::-moz-placeholder {
		opacity: 0;
	}

	.sapMInputBaseInner:-ms-input-placeholder {
		color: @sapUiFieldReadOnlyBackground;
	}
}